<template>
  <div>
  <div class = "moodaddTags"> 
  <div class="mood-tags">我的情绪</div> 
  
    <!-- 新建标签的表单（始终显示） -->  
    <div class="tag-form">  
      <input  
        type="text"  
        v-model="newTag.name"  
        placeholder="输入标签名称"  
        @keyup.enter="addNewTag"  
      /> 
      <select v-model="newTag.emoji">  
        <option value="">选择表情  </option>  
        <option value="😄">😄</option>  
        <option value="😢">😢</option>  
        <option value="😡">😡</option>  
        <option value="😪">😪</option>  
        <!-- 其他表情选项... -->  
      </select>  
      <button @click="addNewTag">新建</button>  
    </div>  
  
    <!-- 标签列表 -->  
    <div class="tag-list">  
      <div  
        class="tag-item"  
        v-for="(tag, index) in tags"  
        :key="tag.id"  
        @click="showEditForm(index)"  
      >  
        <span v-if="!editingIndex || editingIndex !== index">{{ tag.emoji }} {{ tag.name }}</span>  
        <input  
          v-else  
          type="text"  
          class="edit-input"  
          v-model="editingTag.name"  
          @blur="saveEditedTag(index)"  
        />  
        <button @click="deleteTag(index)">×</button>  
      </div>  
    </div>  
  </div>
  <des/> 
</div>
</template>


<script>
import des from './des.vue';

export default {
  components:
{
  des,
},
  data() {
    return {
      tags: [  
        // 示例数据  
        { id: 1, name: '快乐时光', emoji: '😄' },  
        { id: 2, name: '难过的一刻', emoji: '😢' },  
        // ...其他标签  
      ],  
      newTag: { name: '', emoji: '' },  

    };
  },

  methods: {
    
    addNewTag() {  
      if (!this.newTag.name || !this.newTag.emoji) return;  
      this.tags.push({  
        id: Date.now(), // 使用时间戳作为id  
        name: this.newTag.name,  
        emoji: this.newTag.emoji  
      });  
      this.resetForm();  
    },  
    showEditForm(index) {  
      this.editingIndex = index;  
      this.editingTag = { ...this.tags[index] };  
    },  
    saveEditedTag(index) {  
      if (this.editingIndex !== -1) {  
        this.tags[index] = {  
          ...this.tags[index],  
          name: this.editingTag.name,  
          emoji: this.editingTag.emoji || this.tags[index].emoji // 如果没有选择emoji，则保留原来的  
        };  
        this.resetForm();  
      }  
    },  
    deleteTag(index) {  
      this.tags.splice(index, 1);  
    },  
    resetForm() {  
      this.newTag = { name: '', emoji: '' };  
      this.editingIndex = -1;  
      this.editingTag = {};  
    },
  }
};  
</script>
<style>
.moodaddTags {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
}

.mood-tags {
  padding: 8px; 
  color: white;
  background-color: rgba(180, 237, 235, 0.8); /* 透明度为0.8的背景颜色 */
  border-radius: 8px; /* 圆角 */
  font-family: 'SimSun', serif; /* 使用思源宋体 */
  font-size: 15px; /* 文字大小 */
  margin-bottom: 15px;
  /* 与下一个地方的间距  */
}


.tag-form {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.tag-form input[type="text"],
.tag-form select {
  padding: 7px 10px;
  border: none;
  border-radius: 20px;
  margin-right: 10px;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  font-size: 13px;  /* 调整字体大小 */
}

.tag-form select {
  appearance: none; /* 隐藏默认的下拉箭头 */
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>'); /* 自定义下拉箭头 */
  background-position: calc(100% - 20px) 50%; /* 调整箭头位置 */
  background-repeat: no-repeat;
  background-size: 16px; /* 调整箭头大小 */
  padding-right: 40px; /* 保持两个空格的位置 */
}

.tag-form button {
  font-size: 10px; /* 文字大小 */
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  padding: 8px 20px;
  border: none;
  border-radius: 10px;
  background-color:rgba(180, 237, 235, 0.8);
  cursor: pointer;
  color: rgb(249, 249, 250);
}


.tag-list {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border: 2px solid rgb(139, 203, 200);
  border-radius: 15px;
  margin-right: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  margin-bottom: 10px; 
  font-size: 12px; /* 文字大小 */
}

.tag-item span {
  margin-right: 10px;
}

.edit-input {
  padding: 8px;
  border: 2px solid rgb(139, 203, 200);
  border-radius: 20px;
}

.tag-item button {
  margin-left: 10px;
  padding: 5px;
  border: none;
  border-radius: 50%;
  background-color: #cccccc;
  cursor: pointer;
}

.tag-item button:hover {
  background-color: #e4c1ea;
}
</style>










